import React from "react";
import { useUpload } from "../../../../store/useUpload";
import { FilePreview } from "./FilePreview";
import styles from "./FileList.module.css";
import { useChat } from "../../../../store/useChat";

interface FileListProps {
    maxFiles?: number;
}

export const FileList: React.FC<FileListProps> = ({ maxFiles = 5 }) => {
    const conversationId = useChat((state) => state.currentConversationId);
    const files = useUpload((state) => state.files).filter(
        (f) => f.conversationId === conversationId,
    );

    if (files.length === 0) {
        return null;
    }

    return (
        <div className={styles.container}>
            {files.map((file) => (
                <FilePreview key={file.id} file={file} />
            ))}
        </div>
    );
};
